<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nth-child公式</title>
    <style>
         /* 4.nth-child(2n)选择了所有的偶数孩子 等价于 even */
        /* 
            2n就是2*n
            2 * 0 = 0 第0个不存在则忽略
            1 * 2 = 2 选出第二个元素
            2 * 2 = 4 选出第四个元素 
            2 * 3 = 6 选出第六个元素 
            2 * 4 = 8 选出第八个元素 
            依此类推......
        */
        /* .box2 li:nth-child(2n){
            background-color: pink;
        } */

        /* 4.nth-child(2n+1)选择了所有的奇数孩子 等价于 odd */
        /* .box2 li:nth-child(2n+1){
            background-color: skyblue;
        } */

        /* 从第3个开始往后面选. 比如:n+5:从第5个开始往后选,n+6从第6个开始往后选... */
        /* .box2 li:nth-child(n+3){
            background-color: pink;
        } */

        /* 比如 nth-child(-n+5)  选择前5个
            -0 + 5 = 5
            -1 + 5 = 4
            -2 + 5 = 3
            -3 + 5 = 2
            -4 + 5 = 1
            -5 + 5 = 0   不存在0的元素忽略
            -6 + 5 = -1  不存在-1的元素忽略...
        */

        /* 选择前3个 */
        .box2 li:nth-child(-n+3){
            background-color: skyblue;
        }

    </style>
</head>
<body>
    <ul class="box2" >
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
</body>
</html>